<template>
	<view class="container">
		<view class="cu-nav-bar">
			<uni-nav-bar statusBar color="#ffffff" backgroundColor="#07c160" left-icon="left" right-icon="list"
				@clickLeft="goBack" @clickRight="clickRight" title="年度账单" />
		</view>
		<!-- 查询区 -->
		<view class="pay-list-select">
			<button class="select-bt" @click="queryNext(-1)">上一年</button>
			<view>
				<uni-dateformat :date="queryParam.date" format="yyyy年"></uni-dateformat>
			</view>
			<button :class="['select-bt',queryParam.date.slice(0,4) == getNowYear() ?'button-disabled':'' ]"
				@click="queryNext(1)">下一年</button>
		</view>
		<!-- 图表 -->
		<view class="chart-view" v-if="pay_log_list.length > 0">
			<qiun-data-charts style="height: 250rpx" type="area" :opts="opts" :chartData="chartData" :ontouch="true"
				:onmovetip="true" :loadingType="0" :tapLegend="false" tooltipFormat="myTooltip_month" />
		</view>

		<!-- 滚动列表 -->
		<view class="pay-list-scroll">
			<!-- 统计区 -->
			<view
				:class="[ gt(pay_total , 99999.999)||gt(pay_total_s , 99999.999)||lt(pay_total_z , -99999.999) ? 'pay-total-column':'pay-total-row']">
				<view class="pay-total-item">
					<view class="item-name">净收入</view>
					<view :class="[ gteq(pay_total, '0') ? 'money-green':'money-red']">
						{{gteq(pay_total, '0') ? ('￥' + formatMoney(pay_total)) : ('-￥' + formatMoney(pay_total.replace('-','')))}}
					</view>
				</view>
				<view class="pay-total-item">
					<view class="item-name">总收入</view>
					<view :class="[ gteq(pay_total_s, '0') ? 'money-green':'money-red']">
						{{gteq(pay_total_s, '0') ? ('￥' + formatMoney(pay_total_s)) : ('-￥' + formatMoney(pay_total_s.replace('-','')))}}
					</view>
				</view>
				<view class="pay-total-item">
					<view class="item-name">总支出</view>
					<view :class="[ gteq(pay_total_z, '0') ? 'money-green':'money-red']">
						{{gteq(pay_total_z, '0') ? ('￥' + formatMoney(pay_total_z)) : ('-￥' + formatMoney(pay_total_z.replace('-','')))}}
					</view>
				</view>
			</view>
			<!-- 月列表 -->
			<view class="pay-list-item" v-for="item, index in pay_log_list" :key="index"
				@click="goCashLogMonth(item.payTime)">
				<view class="pay-list-item-total">
					<view class="time">
						<uni-dateformat :date="item.payTime" format="yyyy.MM"></uni-dateformat>
					</view>
					<view :class="['money', gteq(item.money, '0') ? 'money-green':'money-red']">
						{{gteq(item.money, '0') ? ('￥' + formatMoney(item.money)) : ('-￥' + formatMoney(item.money.replace('-','')))}}
					</view>
				</view>
				<view class="pay-list-item-desc">
					<view class="money_s"> {{ '收入 ￥' + formatMoney(item.money_s) }} </view>
					<view class="money_z"> {{ '支出 -￥' + formatMoney(item.money_z.replace('-','')) }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onUnmounted,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getNowYear,
		getYearOfAdd,
		formatMoney
	} from '@/utils/utils.js'
	import {
		getCashLogListForYear,
	} from '@/service/service-api.js'
	import {
		gteq,
		gt,
		lt,
		negate
	} from '@/utils/math-utils'

	const opts = ref({
		color: ["#07C160", "#EE6666", "#1890FF", "#91CB74", "#FAC858", "#73C0DE", "#3CA272", "#9A60B4", "#ea7ccc"],
		padding: [5, 0, 0, 0],
		xAxis: {
			axisLineColor: "transparent",
			disabled: false, // 是否禁止绘制x轴
			disableGrid: true, // 是否禁止显示网格线
			labelCount: 7, // 单屏幕数据点文字（刻度点）限制显示的数量
			fontSize: 10,
			fontColor: "#07C160"
		},
		yAxis: {
			data: [{
				// min: 0, // 最小刻度值，不写默认数据中的最小值
				axisLineColor: "transparent",
				axisLine: false, //坐标轴轴线是否显示（数据还能显示） 默认true
				disabled: true, // 是否禁止绘制y轴
				fontSize: 10,
				fontColor: "#07C160"
			}],
			disableGrid: true, // 是否禁止显示网格线
		},
		dataLabel: false, // 是否显示面板数据
		dataPointShape: false, // 是否显示数据点的图形标识
		dataPointShapeType: 'solid', //图形标识点显示类型，可选值：'solid'实心,'hollow'空心
		legend: {
			show: false, // 隐藏图例名称
		},
		enableScroll: false,
		enableMarkLine: true,
		extra: {
			tooltip: {
				// 开启跟手显示tooltip功能（前提条件，1、需要开启touch功能，即:ontouch="true"；2、并且opts.enableScroll=false即关闭图表的滚动条功能）
				showArrow: false, // 是否显示旁边的小三角箭头
				bgColor: '#ffffff',
				bgOpacity: 0.5,
				fontColor: '#07C160',
				fontSize: 10,
				lineHeight: 14,
				borderRadius: 4,
				splitLine: true, // 是否显示垂直竖线
				horizentalLine: false, // 是否显示水平横线
				gridColor: '#07C160', // 竖线颜色
				gridType: 'dash', // 线型，可选值：'solid'实线,'dash'虚线
				dashLength: 6, // 虚线长度 默认 4
				legendShow: false // 是否显示左侧图例图标
			},
			markLine: {
				type: 'dash', // 标记线线型，可选值：'solid'实线,'dash'虚线
				dashLength: 4, // 单段虚线长度
				data: [{
					value: 0,
				}]
			},
			area: { // 区域图配置
				type: "curve", // 区域图类型，可选值："straight"尖角折线模式,"curve"曲线圆滑模式,"step"时序图模式
				opacity: 0.2, // 区域图透明度
				addLine: true, // 是否叠加相应的折线
				width: 2, // 叠加的折线宽度
				gradient: true, // 是否开启区域图渐变色
				activeType: "none" // 激活指示点类型，可选值："none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
			}
		}
	}) // 图表配置
	const chartData = ref({}) // 图表数据
	const pay_log_list = ref([]) // 交易记录列表
	const pay_total = ref([]) // 交易净额
	const pay_total_z = ref([]) // 支出
	const pay_total_s = ref([]) // 收入
	const queryParam = ref({
		date: getNowYear(),
	}) // 列表查询条件

	onShow(() => {
		getLogList(false)
	})

	// 在组件卸载时
	onUnmounted(() => {});

	const getLogList = (toast = true) => {
		const resultObj = getCashLogListForYear(queryParam.value.date, 0)
		pay_log_list.value = resultObj.list
		pay_total.value = resultObj.total
		pay_total_z.value = resultObj.total_z
		pay_total_s.value = resultObj.total_s

		// 按时间正序排序
		resultObj.list.sort((a, b) => a.payTime > b.payTime ? 1 : -1);
		// 封装图表数据;
		let categories = []
		let series_data = []
		let series_s_data = []
		let series_z_data = []
		let y_min = 0
		let y_max = 0
		for (const item of resultObj.list) {
			categories.push(Number.parseInt(item.payTime.slice(5, 7)))
			series_data.push(item.money)
			if (lt(item.money, 0)) {
				if (gt(negate(item.money), y_max)) {
					y_max = negate(item.money)
				}
			} else if (gt(item.money, y_max)) {
				y_max = item.money
			}
			series_s_data.push(item.money_s)
			series_z_data.push(item.money_z)
		}
		y_min = Number(negate(y_max))
		opts.value.yAxis.data[0].min = y_min
		opts.value.yAxis.data[0].max = y_max
		chartData.value = {
			'categories': categories,
			'series': [{
				'name': "净收入",
				'data': series_data
			}]
		}

		// 还原倒序
		resultObj.list.sort((a, b) => a.payTime < b.payTime ? 1 : -1);

		if (resultObj.list.length == 0 && toast) {
			uni.showToast({
				icon: 'none',
				title: "无记录"
			})
		}
	}

	const queryNext = (next) => {
		queryParam.value.date = getYearOfAdd(queryParam.value.date, next)
		getLogList()
	}

	// 前往月度账单
	const goCashLogMonth = (date) => {
		uni.navigateTo({
			url: '/pages/cash_log_month/cash-log-month?date=' + date
		})
	}

	// 返回
	const goBack = () => {
		uni.navigateBack()
	}

	const clickRight = () => {
		uni.showToast({
			icon: 'none',
			title: '正在开发中'
		})
	}
</script>

<style lang="scss">
	@import url("cash-log-year.css");
</style>